<template>
    <div>
      <div class="faq">
        <h3 class="faq-title">{{username}}</h3>
       
       <button class="btn" @click="user()"> 个人信息</button>
       <button class="btn" @click=" tochange()"> 修改密码</button>
       <button class="btn" @click="queit()"> 退出登录</button>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
    
     
     <el-form  ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
        <el-dialog
          title="个人信息"
          :append-to-body='true'
          :visible.sync="dialogVisible"
          width="80%"
          >
          <h4 style="font-weight:900; color:#409EFF;">用户名：</h4>{{username}}<br/>
          <h4 style="font-weight:900; color:#409EFF;">密码：</h4>{{password}}<br/>
          <h4 style="font-weight:900; color:#409EFF;">token：</h4>{{token}}
        </el-dialog>
      </el-form>
    
      <el-form :model="ruleForm"  ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
        <el-dialog
          title="修改密码"
          :append-to-body='true'
          :visible.sync="changeVisible"
          width="80%"
          >
          <el-form-item label="原密码" >
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="新密码" >
            <el-input v-model="ruleForm.newpassword"></el-input>
          </el-form-item>

          <span slot="footer" class="dialog-footer">
            <el-button @click="changePassword()" type="primary" size="medium">确 定</el-button>
          </span>
        </el-dialog>
      </el-form>



    </div>
</template>


<script>
    export default {
      data() {
        return {
          ruleForm:{
            password:''
          },
          username:localStorage.getItem('userName'),
          token:localStorage.getItem('token'),
          dialogVisible: false,
          changeVisible:false,
          password:localStorage.getItem('password'),
        };
      },
      methods: {

        queit(){
            this.$router.push({name: 'log'}) 
        },
        user(){
            this.dialogVisible=true;
        },
        changePassword2(){
          let postData = this.qs.stringify({
               userid:localStorage.getItem('userid'),
               username: localStorage.getItem('userName'),
               userpassword: this.ruleForm.password,

                });
         this.changeVisible=false;
         this.axios({
            method: 'post',
            url: '/manage/changePassword',
            data: postData,
            headers: {
                      'Authorization': 'Bearer ' + localStorage.getItem('token'),
        	          },
          }).then(res=>{ 
            this.$message({
                            type: 'success',
                            message: res.data
                        });
            this.VAR.password=this.ruleForm.password
            this.password=this.VAR.password
          }   )
         
        },
        changePassword(){
          
         this.changeVisible=false;
         this.axios({
                    method: 'post',
                    url:'/manage/modify',
                    headers: {
                      //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
                      'Authorization': 'Bearer ' + this.VAR.token,
        	          },
                    data:{
                      userId:localStorage.getItem('userid'),
                      userName: localStorage.getItem('userName'),
                      userPassword: this.ruleForm.password,
                      newPassword: this.ruleForm.newpassword,
                    }
                }).then(response =>
                {
                      
                    if(response.data.error_massage=='修改密码成功！'){
                      this.$message({
                          type: 'success',
                          message: response.data.error_massage
                      });
                       this.VAR.password=this.ruleForm.newpassword
                       localStorage.setItem('password',this.VAR.password)
                      this.password=this.VAR.password
                    }else{
                      this.$message({
                          type: 'error',
                          message: response.data.error_massage
                      });
                    }
                     
                }).catch(error =>
                {
                    this.$message({
                        type: 'error',
                        message: '未知错误!'
                    });
                    console.log(error);
                });

         
        },
        tochange(){
            this.changeVisible=true;
        }
      },
      mounted:function(){
              const toggles = document.querySelectorAll('.faq-toggle')
        toggles.forEach(toggle => {
        toggle.addEventListener('click', () => {
        toggle.parentNode.classList.toggle('active')
        this.VAR.userName='fafads'
             })
          })
        }
     
      }
    
  </script>

  <style scoped>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

   .faq {
  background-color: transparent;
  border: 1px solid #9fa4a8;
  border-radius: 10px;
  margin: 20px 0;
  padding: 10px;
  position: fixed;
  top: 56px;
  right: 10px;
  overflow: hidden;
  transition:all 0.4s ;
  width: 120px;
  z-index:10;
  height: 20px;
}

.faq.active {
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
  width: 200px;
  height:230px;
}



.faq-title {
  margin: 0px 0 20px;
}

.faq-text {
  display: none;
  margin: 30px 0 0;
}

.faq.active .faq-text {
  display: block;
}

.faq-toggle {
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  position: absolute;
  top: 7px;
  right: 0px;
  height: 30px;
  width: 30px;
}

.faq-toggle:focus {
  outline: 0;
}

.faq-toggle .fa-times {
  display: none;
}

.faq.active .faq-toggle .fa-times {
  color: #fff;
  display: block;
}

.faq.active .faq-toggle .fa-chevron-down {
  display: none;
}

.faq.active .faq-toggle {
  background-color: #9fa4a8;
}
.btn {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  background: lightblue;
  padding: 15px;
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-radius: 10px;
  margin: 0px 0 15px;
}

.btn:hover {
  outline: 0;
  transform: scale(1.02);
}

.btn:active {
  transform: scale(0.98);
}



  </style>